<template>
  <div class="pay-result-page">
    <div class="result-container">
      <!-- 成功状态 -->
      <div v-if="isSuccess" class="result-success">
        <div class="success-icon">
          <el-icon size="80" color="#67c23a">
            <SuccessFilled />
          </el-icon>
        </div>
        <h2 class="result-title">支付成功！</h2>
        <p class="result-message">恭喜您成功升级为VIP会员</p>
        <div v-if="orderNo" class="order-info">
          <p>订单号: {{ orderNo }}</p>
        </div>
        <div class="action-buttons">
          <el-button type="primary" @click="goToVipCenter">
            查看VIP权益
          </el-button>
          <el-button @click="goToHome">
            返回首页
          </el-button>
        </div>
      </div>

      <!-- 失败状态 -->
      <div v-else class="result-failure">
        <div class="failure-icon">
          <el-icon size="80" color="#f56c6c">
            <CircleCloseFilled />
          </el-icon>
        </div>
        <h2 class="result-title">支付失败</h2>
        <p class="result-message">{{ message || '支付过程中出现问题，请重试' }}</p>
        <div class="action-buttons">
          <el-button type="primary" @click="retryPayment">
            重新支付
          </el-button>
          <el-button @click="goToHome">
            返回首页
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { SuccessFilled, CircleCloseFilled } from '@element-plus/icons-vue'
import { useVipStore } from '@/stores/vip'

const router = useRouter()
const route = useRoute()
const vipStore = useVipStore()

const isSuccess = ref(false)
const orderNo = ref('')
const message = ref('')

onMounted(async () => {
  // 在Electron环境中，首先检查sessionStorage中的数据
  const sessionSuccess = sessionStorage.getItem('paymentSuccess')
  const sessionOrderNo = sessionStorage.getItem('paymentOrderNo')
  const sessionMessage = sessionStorage.getItem('paymentMessage')
  
  // 解析URL参数（兼容传统方式）
  const success = route.query.success === 'true' || sessionSuccess === 'true'
  const orderNumber = (route.query.orderNo as string) || sessionOrderNo || ''
  const resultMessage = (route.query.message as string) || sessionMessage || ''

  isSuccess.value = success
  orderNo.value = orderNumber
  message.value = resultMessage

  // 清除sessionStorage数据
  sessionStorage.removeItem('paymentSuccess')
  sessionStorage.removeItem('paymentOrderNo') 
  sessionStorage.removeItem('paymentMessage')

  if (success) {
    // 支付成功，刷新VIP状态
    try {
      await vipStore.fetchVipStatus()
      ElMessage.success('VIP升级成功！')
    } catch (error) {
      console.error('刷新VIP状态失败:', error)
    }
  }

  // Electron环境：不自动关闭窗口，而是显示返回按钮
})

const goToVipCenter = () => {
  router.push('/dashboard/vip-center')
}

const goToHome = () => {
  router.push('/dashboard')
}

const retryPayment = () => {
  router.push('/dashboard/vip-center')
}
</script>

<style scoped>
.pay-result-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.result-container {
  background: white;
  border-radius: 16px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}

.success-icon,
.failure-icon {
  margin-bottom: 30px;
}

.result-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 15px 0;
  color: #303133;
}

.result-success .result-title {
  color: #67c23a;
}

.result-failure .result-title {
  color: #f56c6c;
}

.result-message {
  font-size: 16px;
  color: #606266;
  margin-bottom: 30px;
  line-height: 1.5;
}

.order-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.order-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  min-width: 120px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .result-container {
    padding: 40px 20px;
  }
  
  .result-title {
    font-size: 24px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons .el-button {
    width: 100%;
  }
}
</style>